<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
	<link rel="stylesheet" href="../../../css/layuicmspublic.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">		
		<!--表格开始-->
        <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
        <script type="text/html" id="userToolBar">
			<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
            <a class="layui-btn  layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a>
        </script>
		<script type="text/html" id="userTableBar">
		    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="Lookpicture">查看图片</a>
		</script>
		<!--表格结束-->
		
		<!--添加的弹出层开始-->
		<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
			<!--头像上传-->
			<div class="layui-col-md3 layui-col-xs12 user_right" style="width: 380px;height: 250px;">
				<div class="layui-upload-list">
					<img class="layui-upload-img userFaceBtn userAvatar" src="http://120.24.41.91/group1/M00/00/00/rBL3wl73KO2ABNaaAAA0LN5R0qQ572.png" id="userFace">
					 <p id="resultText"></p>
				</div>
			</div>
			<form class="layui-form layui-row" method="post" id="dataFrm" lay-filter="dataFrm">
				<!-- 图片类型 -->
				<div class="layui-form-item" style="margin-top: 10px;">
					<label class="layui-form-label">图片类型</label>
					<div class="layui-input-block">
						<input type="radio" name="carouselType" value="1" title="轮播图" checked>
						<input type="radio" name="carouselType" value="2" title="板报图">
					</div>
				</div>
			</form>
		</div>
		<!--添加和修改的弹出层结束-->
		
		<!--查看图片的弹出层开始-->
		<div id="LookFilt" style="display: none;padding: 0.3125rem;">
			<img style="width:1420px ;height:473px ;" id="userFace1">
		</div>
		<!--查看图片的弹出层结束-->
    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
<script src="../../../lib/common/Convert_Pinyin.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','layer','upload'], function () {
        var form = layui.form;
        var table = layui.table;
    	var laydate=layui.laydate;
    	var layer=layui.layer;
    	var upload=layui.upload;

      var tableIns=table.render({
            elem: '#userTable',
            url: api+'campus/queryCarousel',
			toolbar:"#userToolBar",
			cellMinWidth:true,
            cols: [[
				{type: "checkbox",  fixed: "left",width:100},
                {field: 'id', title: '图片ID', align: "center",width:350},
                {field: 'username',  title: '添加图片人员', align: "center",width:350},
				{field: 'carouselType',  title: '图片类型', align: "center",templet:function(d){
					return d.carouselType==1?'轮播图':'板报图';
				},width:350},
                {title: '操作',width:360, templet: '#userTableBar', fixed: "right", align: "center",width:350}
            ]],
            page: true
        });
		
		//监听表头的事件
		table.on('toolbar(userTable)', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		    case 'batchdelete':
				batchdelete();
		    break;
			case 'add':
				openAddUser();
			break;
		  };
		});
		
		//批量删除
		function batchdelete(){
			var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
			var data=checkStatus.data;
			var length=checkStatus.data.length;
			console.log(checkStatus.data) //获取选中行的数据
			console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
			if(length==0){
				layer.msg("请选中要删除图片");
			}else{
				layer.confirm('真的删除选择中这些图片么?', function (index) {
					var params="";
					$.each(data,function(index,item){
						if(index==0){
							params+="ids="+item.id;
						}else{
							params+="&ids="+item.id;
						}
					});
					$.post(api+"campus/deleteCarousel",params,function(res){
						layer.msg(res.msg);
						tableIns.reload();
						layer.close(index);
					})
				});
			}
		}
		
		//监听行数据的事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除【'+data.username+'】这个图片吗么', function (index) {
					$.post(api+"campus/deleteCarousel",{ids:data.id},function(res){
						layer.msg(res.msg);
						obj.del();
						layer.close(index);
					})
                });
            }else if(obj.event === 'Lookpicture'){
				Lookpicture(data)
			}
        });
		
		//打开添加用户的弹层
		var mainIndex;
		var url;  //动态的url
		function openAddUser(){
			mainIndex=layer.open({
				type:1,
				title:'上传图片',
				content:$("#addOrUpdateDiv"),
				area:['400px','400px'],
				
			});	
		}
		
		
		//查看头像
		function Lookpicture(data){
			var img = document.getElementById('userFace1'); //得到img对象
			img.src =""; //设置图片
			img.src =baseUrl+data.images; //设置图片
			layer.open({
				type:1,
				title:'【'+data.id+'】的轮播图',
				content:$("#LookFilt"),
				area:['1470px','530px'],
				
			});
		}
		
		//普通图片上传
		  var uploadInst = upload.render({
		    elem: '.userFaceBtn'
		    ,url: api+'files/uploadFiles'
			,field: "mf" //设定文件域的字段名	
			,acceptMime: 'image/*'
		    ,before: function(obj){
				//获取图片参数
				var params1= $('input[name="carouselType"]:checked').val();
				// 文件上传带参数
				this.data = { 'carouselType': params1};
				
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#userFace').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(res){
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }else{
				  location.reload();//刷新界面
				  //上传成功
			  }
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var resultText = $('#resultText');
		      resultText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      resultText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		
    });
</script>
</body>
</html>